<template>
  <aside>
    <div class="description">
    </div>
    <div class="nodes">
      <div
        class="vue-flow__node-input"
        :draggable="true"
        @dragstart="onDragStart($event, 'start')"
      >
        事件开始
      </div>
      <div
        class="vue-flow__node-default"
        :draggable="true"
        @dragstart="onDragStart($event, 'deal')"
      >
        事件处理
      </div>
      <div
        class="vue-flow__node-output"
        :draggable="true"
        @dragstart="onDragStart($event, 'end')"
      >
        事件结束
      </div>
      <div
        class="vue-flow__node-output"
        :draggable="true"
        @dragstart="onDragStart($event, 'custom')"
      >
        用户自定义节点
      </div>
    </div>
  </aside>
</template>

<script lang="ts" setup>
import useDragAndDrop from '../use_dnd';

const { onDragStart } = useDragAndDrop();
</script>

<style lang="less" scoped>

</style>

